<template>
  <el-dialog :title="'项目列表'" :visible.sync="dialogVisible" width="970px">
    <div class="projectContent">
      <div class="searchDiv">
        项目名称：
        <el-input
          v-model="search.name"
          placeholder="请输入项目名称"
          class="searchInput"
          @keyup.enter.native="searchClick"
        />
        <el-button type="primary" class="topBtn" @click="searchClick">查询</el-button>
        <el-button class="topBtn" @click="clearClick">重置</el-button>
      </div>
      <el-scrollbar class="searchContent">
        <div v-if="projectData.length > 0" class="templateContent">
          <div
            v-for="(item, index) in projectData"
            :key="'template' + index"
            class="item"
            :class="{ active: currentProjectId === item.projectId }"
            @click="currentProjectId = item.projectId"
          >
            <div class="header">
              <el-tooltip :disabled="getStrLength(item.name) <= 18" :content="item.name" placement="top">
                <div class="title">项目名称：{{ item.name }}</div>
              </el-tooltip>
              <div class="updateTime">最后编辑时间：{{ item.updateTime }}</div>
            </div>
          </div>
        </div>
        <div v-else class="emptyContent">
          <el-empty :image="require('@/assets/imgs/empty.png')"></el-empty>
        </div>
      </el-scrollbar>
    </div>

    <span slot="footer" style="display: block; text-align: center">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getStrLength } from '@/utils/index'
import { getProjectList } from '@/api/project-management'
import defaultSettings from '@/settings'
import { generateUUID, postMessage, receivedMessage } from '@/utils/index'
export default {
  data() {
    return {
      search: { name: '' },
      dialogVisible: false,
      projectData: [],
      currentProjectId: null,
      getProjectListRequestId: generateUUID()
    }
  },
  mounted() {
    receivedMessage(this.dataHandle)
  },
  methods: {
    dataHandle(result) {
      let self = this
      let e = defaultSettings.isWPF ? result : { data: JSON.parse(result) }
      if (e.data.webInfo.requestId === self.getProjectListRequestId) {
        self.projectData = e.data.response.data.projectList
      }
    },
    is() {
      this.dialogVisible = true
      this.clearClick()
    },
    getStrLength(str) {
      return getStrLength(str)
    },
    searchClick() {
      this.currentProjectId = null
      if (defaultSettings.isWPF || defaultSettings.isCEF) {
        this.getProjectListRequestId = generateUUID()
        let message = {
          RequestUrl: process.env.VUE_APP_URL + '/project/getList',
          RequestMethod: 'POST',
          Headers: {
            contentType: 'application/json'
          },
          QueryParameter: {},
          RequestBody: { name: this.search.name },
          WebInfo: {
            requestId: this.getProjectListRequestId
          }
        }
        postMessage(message)
      } else {
        getProjectList({ name: this.search.name }).then((res) => {
          this.projectData = res.data.projectList
        })
      }
    },
    clearClick() {
      this.search.name = ''
      this.searchClick()
    },
    handleSubmit() {
      if (this.currentProjectId) {
        this.dialogVisible = false
        this.$emit('submit', this.currentProjectId)
      } else {
        this.$message.warning('请选择项目')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/element-variables.scss';
.projectContent {
  height: 100%;
  .searchDiv {
    margin-bottom: 10px;
    position: relative;
    .searchInput {
      width: 300px;
      padding-right: 0;
      margin-right: 15px;
    }
  }
  .searchContent {
    height: 350px;
  }
  .templateContent {
    display: flex;
    flex-wrap: wrap;
    align-content: baseline;

    .addItem:hover {
      border: 1px dotted $--color-primary;
    }
    .item {
      padding: 24px 20px;
      border: 1px solid #dde4ec;
      border-radius: 4px;
      margin-right: 10px;
      margin-bottom: 10px;
      width: 300px;
      height: 110px;
      background-color: #fcfdff;
      position: relative;

      .header {
        // display: flex;
        // align-items: center;
        color: #303453;
        .title {
          font-size: 16px;
          font-family: Source Han Sans CN-Bold, Source Han Sans CN;
          font-weight: bold;

          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: calc(100% - 32px);
        }
        .updateTime {
          margin-top: 18px;
        }
      }
    }
    .item:hover {
      border: 1px solid $--color-primary;
    }
    .item.active {
      border: 1px solid $--color-primary;
    }
  }

  .emptyContent {
    width: 75%;
    margin: 0 auto;
    margin-top: 15px;
    background-color: #f7f8fa;
  }
}
</style>
